<template>
  <div>
    <h3>Slot</h3>
    <div>
      <Child :persons="persons">
        <!-- 直接这样写就是默认插槽 -->
        <template #two>
          <div>你猜猜我是结构几</div>
        </template>
        <div>结构2</div>
        <div>结构3</div>
        <div>结构4</div>
        <template #three>
          <div>你猜猜看</div>
        </template>
        <template #how="{ item }">
          <p :style="{ background: item.age > 20 ? 'red' : '' }">
            {{ item.name }}{{ item.age }}
          </p>
        </template>
      </Child>
    </div>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  name: "Slot",
  components: { Child },
  data() {
    return {
      persons: [
        { id: "001", name: "李博", age: 30 },
        { id: "002", name: "red青", age: 14 },
        { id: "003", name: "(个_个)", age: 24 },
        { id: "004", name: "lucy", age: 55 },
        { id: "005", name: "lily", age: 4 },
        { id: "006", name: "liming", age: 19 },
      ],
    };
  },
};
</script>

<style>
</style>